<template>
  <div class="hello">
    <div>
      <van-grid clickable :column-num="5" square>
        <van-grid-item icon="phone-circle-o" text="报事报修" to="/service" />
        <van-grid-item icon="lock" text="密码开门" to="/" />
        <van-grid-item icon="manager-o" text="访客密码" to="/" />
        <van-grid-item icon="gold-coin-o" text="物业缴费" to="/pay" />
        <van-grid-item icon="cart-o" text="周边商城" to="/" />
        <van-grid-item icon="bag-o" text="快递查询" to="/" />
        <van-grid-item icon="desktop-o" text="智能家居" to="/" />
        <van-grid-item icon="logistics" text="我的车辆" to="/parkspace" />
        <van-grid-item icon="tv-o" text="速投屏" to="/" />
        <van-grid-item icon="apps-o" text="查看全部" to="/" />
      </van-grid>
    </div>
    <!--小区公告-->
    <van-notice-bar
      left-icon="volume-o"
      color="red"
      text="通知:今晚10:00~12:00 南窑头国际西区停水停电,请居民做好相关准备!!!"
    />

    <!--轮播图-->
    <div class="lunbo">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" class="lunbotu"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!--明星物业-->
    <div>
      <van-image
        width="100%"
        height="160px"
        src="http://qzvllizi7.hn-bkt.clouddn.com/pingfen.jpg"
      />
    </div>
  </div>

</template>

<script>
  export default {
    name: 'mine',
    data() {
      return {
        images: [
          'http://qzvllizi7.hn-bkt.clouddn.com/index.jfif',
          'http://qzvllizi7.hn-bkt.clouddn.com/img3.jfif',
          'http://qzvllizi7.hn-bkt.clouddn.com/img1.webp',
          'http://qzvllizi7.hn-bkt.clouddn.com/img2.jfif'
        ],
        value:'123'
      }
    }
  }
</script>
<style scoped>
  .lunbotu{
    width:93%;
    height: 180px;
  }
  .gonggao{
    border: 1px solid whitesmoke;
  }
</style>

